window.addEventListener("load", function () {
	//  功能开始: 拼接动态渲染
	// 1.获取后台数据对数组进行遍历
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	// 2.遍历时拼接为HTML结构
	apiData.forEach(function (v) {
		// 3.将HTML结构放入指定位置
		$(
			"#numBer"
		).innerHTML += `<span data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}次</span>`;
	});
	// 给默认的第一个增加激活样式
	$("#numBer span")[1].classList.add("active");
	// 默认显示第一个激活样式的价格参数
	$("#prices").innerHTML = `<span> &yen;${
		$("#numBer span")[1].dataset.price
	}</span>约${$("#numBer span")[1].dataset.unitprice}元/次,仅限企业实名购买`;

	// 功能一:点击numBer区增加激活样式
	// 1.获取相应节点
	$("#numBer span").forEach(function (v, i) {
		// 2.给span 绑定点击事件
		v.addEventListener("click", function () {
			if (i === 0) {
			} else {
				// 3.先排他,将span 所有激活样式移除
				$("#numBer span").forEach(function (item) {
					item.classList.remove("active");
					// 功能二:点击时切换价格文字显示在价格区
					$(
						"#prices"
					).innerHTML = `<span> &yen;${v.dataset.price}</span>约${v.dataset.unitprice}元/次,仅限企业实名购买`;
				});
				// 4.再给自己添加激活样式
				this.classList.add("active");
			}
		});
	});

	// //功能三:点击textTab区增加激活样式
	// // 1.获取相应节点$("#textTab ul li")
	// $("#textTab ul li").forEach(function (v, i) {
	// 	// 2.先遍历给li绑定点击事件
	// 	v.addEventListener("click", function () {
	// 		// 3.先排他,将所有li的激活样式移除
	// 		$("#textTab ul li").forEach(function (item, index) {
	// 			item.classList.remove("active");
	// 			//遍历时.下面的div盒子也消失
	// 			$("#artLt div")[index].classList.remove("on");
	// 		});
	// 		// 4.再给当前被点击的增加激活样式
	// 		this.classList.add("active");
	// 		//再给当前被点击的增加显示
	// 		$("#artLt div")[i].classList.add("on");
	// 	});
	// });
	// 封装tab渲染函数
	// 1.实现基本功能
	// 2.确认函数名字--tab
	// 3.确认参数 -- tabSelector, tabClassName,contSelector,contClassName
	// 4.确认是否需要返回值 --不需要
	// 5.将功能代码放入函数壳子,替换对应变量
	function tab(tabSelector, tabClassName, contSelector, contClassName) {
		// 1.获取相应节点$("#textTab ul li")
		$(tabSelector).forEach(function (v, i) {
			// 2.先遍历给li绑定点击事件
			v.addEventListener("click", function () {
				// 3.先排他,将所有li的激活样式移除
				$(tabSelector).forEach(function (item, index) {
					item.classList.remove(tabClassName);
					//遍历时.下面的div盒子也消失
					$(contSelector)[index].classList.remove(contClassName);
				});
				// 4.再给当前被点击的增加激活样式
				this.classList.add("tabClassName");
				//再给当前被点击的增加显示
				$(contSelector)[i].classList.add(contClassName);
			});
		});
	}
	// 6.函数调用
	tab("#textTab ul li","active","#artLt div","on")
	// 7.优化代码

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点X轴速度,正为右,负为左
		vy: 4, //点Y轴速度
		height: 4,
		width: 4,
		count: 200, //点个数
		color: "0, 189, 255", //点颜色
		stroke: "53, 122, 197", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
